/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {View, Dimensions, Text} from 'react-native';
// import SplashScreen from 'react-native-splash-screen';
import {
    CAround, CBetween, CCenter, CColumn, CHand, CItemX, CItemY, CLine, CRow, CWrap, 
    CIcon, CImage, CLabel, CSvg, CText,
    CContent, CFloat, CFooter, CHeader, CPage, CSide, 
    CEmpty, CError, CFail, CSkeleton, 
    CButtonColor, CButtonOpacity, CTouchColor, CTouchOpacity
} from '../library/comp';
import Design from '../design';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/
 export default class Home extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
        super(props);
    }
    
    /*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
    /**
     * didMount
     */
    componentDidMount(){

        // 关闭启动画面
        // SplashScreen.hide();

    }

    /*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render() {
		return (
            <CPage>
                <CContent bg='#ddd' my='60'>

                    <CRow bg='#999' mx='20' h='100'>
                        <CText color='#f00' size='30'>CRow</CText>
                    </CRow>

                    <CAround bg='#f60' h='100' my='30'>
                        <CLabel color='#f00' size='30'>Left</CLabel>
                        <CLabel color='#f00' size='30'>Center</CLabel>
                        <CLabel color='#f00' size='30'>Right</CLabel>
                    </CAround>

                    <CBetween bg='#999' h='80'>
                        <CButtonColor active='#f00' pa='10 20' bg='#f60' onPress={()=> {
                            console.log('123')
                        }}>测试</CButtonColor>
                        <CLabel pa='6 12' bg='#333' color='#f00' size='24'>Center</CLabel>
                        <CButtonOpacity active='0.3' pa='10 20' bg='#f60'>测试</CButtonOpacity>
                    </CBetween>

                    <CCenter bg='#f60' h='100' my='30'>
                        <CIcon icon={Design.icon.active_bg} w='60' h='60' color='#666'></CIcon>
                    </CCenter>

                    <CColumn w='750' bg='#999'>
                        <CRow bg='#f60' h='60' w='750'>
                            <CText>头部</CText>
                        </CRow>
                        <CRow bg='#999' h='60'>
                            <CText>尾部</CText>
                        </CRow>
                    </CColumn>

                    <CWrap ma='20' bg='#f99'>
                        <CText>1234555   </CText>
                        <CText>1234555   </CText>
                        <CText>1234555   </CText>
                        <CText>1234555   </CText>
                        <CText>1234555   </CText>
                        <CText>1234555   </CText>
                        <CText>1234555   </CText>
                        <CText>1234555   </CText>
                    </CWrap>



                </CContent>

                <CFloat right='20' bottom='100' ra='100' w='50' h='50' bg='#f60' x='center' y='center'>
                    <CText color='#fff'>测</CText>
                </CFloat>

                <CHeader h='60' bg='#06f'>
                    <CLabel color='#f00' size='30'>Left</CLabel>
                    <CLabel color='#f00' size='30'>Center</CLabel>
                    <CLabel color='#f00' size='30'>Right</CLabel>
                </CHeader>

                <CFooter h='60' bg='#0f6'>
                    <CLabel color='#f00' size='30'>Left</CLabel>
                    <CLabel color='#f00' size='30'>Center</CLabel>
                    <CLabel color='#f00' size='30'>Right</CLabel>
                </CFooter>

            </CPage>
		);
	}
}